<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/swiper-bundle.css">
    <link rel="stylesheet" href="./font/蓝铅笔/iconfont.css">
    <link rel="stylesheet" href="./font/play/iconfont.css">
    <link rel="stylesheet" href="font/响应式底部/iconfont.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔头部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔尾部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔首页-移动端.css"> 
</head>
<body>
    <div class="header-box">
    <div class="header1">
        <div class="header-heart">
            <div class="logo">
               <a href="#"><img src="./蓝铅笔漫步images/logo.png" alt=""></a> 
            </div>
            <div class="search">
               <a href="#"><i class="iconfont icon-sousuo"></i></a> 
            </div>
            <div class="login">
              <div class="login-box">
                <div class="login-img">
                    <img src="./蓝铅笔漫步images/1.png" alt="">
                </div>
                <div class="login-font">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<div class="adv-box">
    <div class="adv">
        <a href="#"><img src="./蓝铅笔漫步images/164.png" alt=""></a>
    </div>
</div>
    <div class="slide">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./蓝铅笔漫步images/165.png" alt=""></div>
                <div class="swiper-slide"><img src="./蓝铅笔漫步images/139.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div class="apply">
      <div class="apply-heart">
        <ul class="apply-heart-ul">
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/159.png" alt="">
                    </div>
                    <span>免费教程</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/160.png" alt="">
                    </div>
                    <span>教程兑换</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/161.png" alt="">
                    </div>
                    <span>大触来了</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/162.png" alt="">
                    </div>
                    <span>学员作品</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/163.png" alt="">
                    </div>
                    <span>学员作品</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/159.png" alt="">
                    </div>
                    <span>免费教程</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/160.png" alt="">
                    </div>
                    <span>教程兑换</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/161.png" alt="">
                    </div>
                    <span>大触来了</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/162.png" alt="">
                    </div>
                    <span>学员作品</span>
                </a>
            </li>
            <li class="apply-heart-ul-li">
                <a href="#">
                    <div class="apply-img">
                        <img src="./蓝铅笔漫步images/163.png" alt="">
                    </div>
                    <span>学员作品</span>
                </a>
            </li>
        </ul>
      </div>
    </div>
    <div class="live">
        <div class="live-heart">
            <div class="live-title">
                <h2>打出直播</h2>
                <a href="#">
                    <span>查看更多</span>
                    <i class="iconfont icon-youjiantou"></i>
                </a>
            </div>
            <div class="live-content">
                <ul class="live-content-ul">
                    <li class="live-content-ul-li">
                        <div class="avatar">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/6.png" alt="">
                                <span>moon</span>
                            </a>
                        </div>
                        <h3><a href="#">想要画面不脏乱？Get水彩运用的奇妙手法</a></h3>
                        <div class="live-img">
                            <img src="./蓝铅笔漫步images/131.png" alt="">
                            <span>即将直播</span>
                            <span>第142期</span>
                            <i class="iconfont icon-bofang"></i>
                        </div>
                        <div class="live-time">
                            <span>时间：9月22日 19:30</span>
                            <span>127548人感兴趣</span>
                        </div>
                    </li>
                    <li class="live-content-ul-li">
                        <div class="avatar">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/6.png" alt="">
                                <span>moon</span>
                            </a>
                        </div>
                        <h3><a href="#">想要画面不脏乱？Get水彩运用的奇妙手法</a></h3>
                        <div class="live-img">
                            <img src="./蓝铅笔漫步images/132.png" alt="">
                            <span></span>
                            <span>第142期</span>
                        </div>
                        <div class="live-time">
                            <span>时间：9月22日 19:30</span>
                            <span><i class="iconfont icon-aixin"></i>1275</span>
                        </div>
                    </li>
                    <li class="live-content-ul-li">
                        <div class="avatar">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/6.png" alt="">
                                <span>moon</span>
                            </a>
                        </div>
                        <h3><a href="#">想要画面不脏乱？Get水彩运用的奇妙手法</a></h3>
                        <div class="live-img">
                            <img src="./蓝铅笔漫步images/140.jpg" alt="">
                            <span></span>
                            <span>第142期</span>
                        </div>
                        <div class="live-time">
                            <span>时间：9月22日 19:30</span>
                            <span><i class="iconfont icon-aixin"></i>1275</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tutorial">
        <div class="tutorial-heart">
            <div class="live-title">
                <h2>热门教程</h2>
                <a href="#">
                    <span>查看更多</span>
                    <i class="iconfont icon-youjiantou"></i>
                </a>
            </div>
            <div class="tutorial-content">
                <ul class="tutorial-content-ul">
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/8.png" alt="">
                        </div>
                        <div class="tutorial-font">
                            <a href="#">【日系教程】伪厚涂可爱少女头像绘制教程</a>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/10.png" alt="">
                        </div>
                        <div class="tutorial-font">
                            <a href="#">【日系教程】伪厚涂可爱少女头像绘制教程</a>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/12.png" alt="">
                        </div>
                        <div class="tutorial-font">
                           <a href="#">【日系教程】伪厚涂可爱少女头像绘制教程</a>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/14.png" alt="">
                        </div>
                        <div class="tutorial-font">
                           <a href="#">【日系教程】伪厚涂可爱少女头像绘制教程</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="graphic">
        <div class="graphic-heart">
            <div class="live-title">
                <h2>图文教程</h2>
                <a href="#">
                    <span>查看更多</span>
                    <i class="iconfont icon-youjiantou"></i>
                </a>
            </div>
            <div class="graphic-content">
                <ul class="graphic-heart-ul">
                    <li class="graphic-heart-ul-li">
                        <div class="graphic-img">
                            <a href="#"><img src="./蓝铅笔漫步images/141.jpg" alt=""></a>
                        </div>
                        <div class="graphic-font">
                            <h3> <a href="#">【PS教程】打造发光效果效果</a></h3>
                            <p>老师：阿拉希酱</p>
                        </div>
                    </li>
                    <li class="graphic-heart-ul-li">
                        <div class="graphic-img">
                           <a href="#"><img src="./蓝铅笔漫步images/142.jpg" alt=""></a> 
                        </div>
                        <div class="graphic-font">
                            <h3> <a href="#">【PS教程】打造发光效果效果</a></h3>
                            <p>老师：阿拉希酱</p>
                        </div>
                    </li>
                    <li class="graphic-heart-ul-li">
                        <div class="graphic-img">
                           <a href="#"> <img src="./蓝铅笔漫步images/143.jpg" alt=""></a>
                        </div>
                        <div class="graphic-font">
                            <h3> <a href="#">【PS教程】打造发光效果效果</a></h3>
                            <p>老师：阿拉希酱</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="news">
        <div class="news-heart">
            <div class="live-title">
                <h2>推荐资讯</h2>
                <a href="#">
                    <span>查看更多</span>
                    <i class="iconfont icon-youjiantou"></i>
                </a>
            </div>
            <div class="news-content">
                <ul class="news-content-ul">
                    <li class="news-content-ul-li">
                        <div class="news-img">
                            <a href="#"><img src="./蓝铅笔漫步images/55.png" alt=""></a>
                            <span>活动快递</span>
                        </div>
                        <div class="news-font">
                            <h3><a href="#">测手气丨疯狂派兑 幸运抽奖</a></h3>
                            <span>2022年08月25日</span>
                        </div>
                    </li>
                    <li class="news-content-ul-li">
                        <div class="news-img">
                            <a href="#"><img src="./蓝铅笔漫步images/56.jpg" alt=""></a>
                            <span>素材参考</span>
                        </div>
                        <div class="news-font">
                            <h3><a href="#">【附下载】色彩参考大合集，一键收获大佬同款配色，</a></h3>
                            <span>2022年08月25日</span>
                        </div>
                    </li>
                    <li class="news-content-ul-li">
                        <div class="news-img">
                            <a href="#"><img src="./蓝铅笔漫步images/57.jpg" alt=""></a>
                            <span>素材参考</span>
                        </div>
                        <div class="news-font">
                            <h3><a href="#">【附下载】色彩参考大合集，一键收获大佬同款配色，</a></h3>
                            <span>2022年08月25日</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-heart">
            <div class="footer-top">
                <a href="#">关于蓝铅笔</a>
            </div>
            <div class="footer-middle">
                <ul class="footer-middle-ul">
                    <li class="footer-middle-ul-li">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/58.png" alt="">
                        </a>
                    </li>
                    <li class="footer-middle-ul-li">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/59.png" alt="">
                        </a>
                    </li>
                    <li class="footer-middle-ul-li">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/60.png" alt="">
                        </a>
                    </li>
                    <li class="footer-middle-ul-li">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/61.png" alt="">
                        </a>
                    </li>
                    <li class="footer-middle-ul-li">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/62.png" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-bottom">
                <span>Copyright © 2020杭州多技教育科技有限公司</span>
                <a href="#">浙ICP备11056181号</a>
                <a href="#">
                    <img src="./蓝铅笔漫步images/63.png" alt="">
                    <span>浙公网安备33010602000717号</span>
                </a>
            </div>
        </div>
    </div>
    <div class="small-mask-box">
        <div class="small-mask">
           <div class="small-mask-heart">
               <ul class="small-mask-heart-ul">
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔首页-移动端.html">
                           <p><i class="iconfont icon-shouye-shouye"></i></p>
                           <p><span>首页</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-教程.html">
                           <p><i class="iconfont icon-diannao"></i></p>
                           <p><span>教程</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔网校-移动端.html">
                           <p><i class="iconfont icon-wenzhang"></i></p>
                           <p><span>网校</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔大触-移动端.html">
                           <p><i class="iconfont icon-chengshijinglixianxing"></i></p>
                           <p><span>大触</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-社区.html">
                           <p><i class="iconfont icon-taolun"></i></p>
                           <p><span>社区</span></p>
                       </a>
                   </li>
               </ul>
           </div>
        </div>
       </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
        })        
        </script>
</body>
</html>